<template>
	<page-loading :show='pageLoading'>
		<!-- 提现 -->
		<view class="container">

			<!-- 头部 -->
			<view class="boxss" @click="show = true">
				<view class="flex flex-jc-sb flex-ai-c header">
					<view>到账银行卡</view>
					<view class="flex flex-ai-c">
						<view style="margin-right: 10rpx;" class="flex">
							<image v-if="carInfo.bank_logo" style="width: 50rpx;" mode="widthFix" :src="carInfo.bank_logo"></image>
						</view>
						<view>{{carInfo.bank_name}}</view>
						<view>（{{carInfo.bank_num.substr(-4)}}）</view>
					</view>
					<view>
						<u-icon name="arrow-right" color="#999999" size="30rpx"></u-icon>
					</view>
				</view>
			</view>

			<!-- 提现金额 -->
			<view class="boxss">
				<view class="main">
					<view>
						<view>提现金额</view>
						<view style="margin: 19rpx 0;">我们会扣除提现金额的0.006%，作为手续费</view>
					</view>
					<view class="flex price flex-jc-sb flex-ai-c">
						<view class="fz">￥</view>
						<view class="flex number flex-ai-c" style="position: relative;">
							<view>
								<input type="number" @focus="color = '2rpx solid #EEEEEE'"
									:style="{'border-bottom':color}" class="fz" v-model="price" @input="changePrice" />
							</view>
							<view class="all" @click="allPrice">全部提现</view>
						</view>

					</view>
					<view style="margin-left: 72rpx;">当前可提现余额{{balance}}元</view>
					<view class="comfig flex flex-jc-c flex-ai-c" @click="cofWithdrawal">
						<view>确认提现</view>
					</view>
				</view>

			</view>

			<view style="margin-top: 400rpx;">
				<view class="flex flex-ai-c flex-jc-c">
					<view style="margin-right: 10rpx;" @click="record">
						<i-icon icon="iconshijian" size="32rpx" />
					</view>
					<view style="color: #666666;font-size: 28rpx;" @click="record">提现记录</view>
				</view>

			</view>

			<!-- 输入支付密码 -->
			<u-modal v-model="inputPass" :mask-close-able="true" :show-title="false" :show-confirm-button="false">
				<view class="containerTwo">
					<view class="1234">
						<view class="signbox">
							<view class="quick">
								<view class="quitext">
									请输入支付密码
								</view>
								<view class="un">
									请输入支付密码，以验证身份
								</view>
							</view>
						</view>
						<view class="tel">
							<view class="input">
								<view class="enter-code mt-20">
									<u-message-input :dot-fill="true" textnumber="number" mode="bottomLine" :width="70"
										name="Password" v-model="Password" :maxlength="6" :breathe="true" :focus="true"
										active-color="#FBB000" inactive-color="#666"
										@finish="finish"></u-message-input>
								</view>
							</view>
						</view>
						<!-- <view class="flex flex-jc-fe forget" @click="forgetPwd">忘记密码</view> -->
						<view class="pass-btn" @click="withdrawal">
							<view>确定</view>
						</view>
					</view>
				</view>
			</u-modal>

			<!-- 选择银行卡 -->
			<u-popup v-model="show" mode='bottom'>
				<view style="padding-bottom: 27rpx;">
					<view class="flex flex-jc-sb flex-ai-c pop" style="border-bottom: 2rpx solid #EEEEEE;">
						<view class="cancel" @click="show = false">取消</view>
						<view style="text-align: center;">
							<view class="pop-choose">选择到账银行卡</view>
							<view class="pop-time">请留意各银行到账时间</view>
						</view>
						<view class="addCard" @click="addCard">添加新卡</view>
					</view>

					<view v-for="item in cardList" class="pop-list flex flex-ai-c" :key='item.id' @click="choose(item)">
						<view><image v-if="item.bank_logo" style="width: 50rpx;" mode="widthFix" :src="item.bank_logo"></image></view>
						<view>
							<view style="font-size: 32rpx;color: #333333;" class="flex flex-ai-c">
								{{item.bank_name}}（{{item.bank_num}}）
							</view>
							<view class="pop-time">2小时内到账</view>
						</view>
					</view>
				</view>

			</u-popup>

			<!-- 忘记密码 -->
			<u-popup v-model="forget" mode='bottom'>
				<view>
					<view class="flex forget-title">
						<view style="position: relative;left: 33rpx;" class="cancel">取消</view>
						<view style="text-align: center;flex: 1;" class="forget-two">忘记密码</view>
					</view>

					<view class="forget-mian">
						<view class="flex word">
							<view>姓名：</view>
							<view>**国</view>
						</view>
						<view class="flex word">
							<view>身份证：</view>
							<view>
								<input type="number" placeholder="请输入身份证号码" />
							</view>
						</view>
						<view class="flex word">
							<view>手机号：</view>
							<view>{{filterTel(mobile)}}</view>
						</view>
					</view>

					<view class="pass-btn" style="width: 662rpx;" @click="next">
						<view>下一步</view>
					</view>
				</view>

			</u-popup>

			<u-modal :show-title="false" v-model="phone" :show-confirm-button="false">
				<view class="phone">
					<view style="position: absolute;right: 35rpx;top: 35rpx;" @click="phone = false">X</view>
					<view class="phone-title">
						<view style="font-size: 34rpx;font-weight: bold;">验证手机号</view>
						<view style="margin: 40rpx 0;font-size: 28rpx;">验证码已发送至136****8876</view>
					</view>

					<view class="phone-message">
						<u-message-input textnumber="number" mode="bottomLine" :width="70" v-model="Password"
							:maxlength="6" :breathe="true" :focus="true" active-color="#FBB000" inactive-color="#666"
							@change="changePhone" @finish="finishPhone"></u-message-input>
					</view>

					<view>
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-verification-code>
						<view class="flex flex-jc-sb" style="font-size: 26rpx;margin: 0 43rpx 39rpx 43rpx;">
							<view style="color: #EB5C02;">验证码错误，请重新输入</view>
							<view @click="next"><text>{{tips}}</text></view>
						</view>
						<view class="pass-btn" @click="setPwd">
							<view>确定</view>
						</view>
					</view>

				</view>
			</u-modal>
			<u-toast ref="uToast"></u-toast>
		</view>
	</page-loading>
</template>

<script src="./withdrawal.js"></script>

<style lang="scss">
	@import './withdrawal.scss';
</style>
